<!DOCTYPE html>
<html lang="en">
<!-- 
    知乎仿写使用flex布局，功能实现:vue。
 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知乎仿写</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .root {
            display: flex;
            flex-direction: column;
            background: url("../images/5.png");
            background-repeat: no-repeat;
            background-color: #b8e5f8;
            align-items: center;
            background-size: cover;
            /* height: 100vh; */
        }
        
        .logo {
            margin-bottom: 24px;
        }
        
        .logo img {
            width: 128px;
            height: 81px;
        }
        
        form {
            background-color: #FFF;
            min-width: none;
            padding: 0 24px 24px;
            border-radius: 2px;
        }
        
        .info {
            width: 400px;
            border-radius: 2px;
            background-color: #FFFFFF;
        }
        
        .selectOption {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 60px;
            padding-left: 24px;
        }
        
        .selectOption div {
            line-height: 60px;
            font-size: 16px;
            color: #121212;
        }
        
        select {
            width: 80px;
        }
        
        .line {
            width: 25px;
            height: 48px;
        }
        
        .action {
            border-bottom-color: #06f;
        }
        
        .telphone {
            border-bottom: 1px solid #ebebeb;
            width: 352px;
            height: 49px;
        }
        
        .Btn {
            background-color: #0066ff;
            color: #fff;
            width: 100%;
            border: none;
            outline: none;
            height: 36px;
        }
        
        .telStyle>div>select,
        .telStyle>div>input {
            border: none;
        }
        
        .telStyle>div>select,
        .telStyle>div>input:focus {
            outline: none;
        }
        
        .telStyle {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .telStyle:last-child input {
            height: 48px;
            width: 234px;
        }
        
        .telStyle:first-child select {
            height: 49px;
            width: 93px;
        }
        
        .VerificationCode {
            border-bottom: 1px solid #ebebeb;
            margin-top: 22px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        
        .collect {
            display: flex;
            align-items: center;
        }
        
        .collect a {
            display: inline-block;
        }
        
        .CodeReceiving {
            display: flex;
            flex-direction: row-reverse;
            margin: 18px 0;
        }
        
        .CodeReceiving a {
            color: #8590a6;
            text-decoration: none;
        }
        
        .codeNum input {
            height: 48px;
        }
        
        .codeNum input:focus {
            outline: none;
        }
        
        input {
            border: none;
        }
        
        .leftinfo {
            display: flex;
            flex-direction: row;
        }
        
        .leftinfo div {
            margin-right: 24px;
            cursor: default;
        }
        
        .setBtn {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        
        .Tips {
            margin: 30px 0 10px 0;
            padding: 0 24px;
        }
        
        .Tips,
        .Tips a {
            color: #808080;
            font-size: 13px;
        }
        
        a {
            text-decoration: none;
        }
        
        .login {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-top: 1px solid #ebebeb;
            height: 60px;
            align-items: center;
            color: #8590a6;
            margin: 0 24px;
        }
        
        .QQ {
            display: flex;
        }
        
        .header {
            height: 45px;
        }
        
        .icon {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            cursor: pointer;
        }
        
        .icon img {
            width: 20px;
            height: 20px;
        }
        
        .WeChat,
        .QQ,
        .sina {
            display: flex;
            font-size: 14px;
            color: #8590a6;
        }
        
        .QQ,
        .sina {
            margin-left: 15px;
        }
        
        .WeChaFont,
        .QQFont,
        .SinaFont {
            margin-left: 8px;
        }
        
        .bottom {
            display: flex;
            width: 400px;
            height: 60px;
            padding: 0 24px;
            color: #0066ff;
            align-items: center;
            background-color: #F6F6F6;
            box-sizing: border-box;
            margin: 0;
            justify-content: space-between;
        }
        
        .bottominfo {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        
        .cilckBtn {
            border: none;
            color: #0066FF;
            font-size: 15px;
            background-color: #f6f6f6;
        }
        
        input {
            border: none;
            outline: none;
        }
        
        .other {
            display: flex;
            justify-content: space-between;
            margin: 18px 0;
        }
        
        .footerInfo {
            font-size: 12px;
            line-height: 21px;
            text-align: center;
            color: #fff;
            padding-bottom: 20px;
            padding-top: 45px;
        }
        
        .footerInfo a {
            color: #FFF;
        }
        
        .footerInfo a::after {
            content: " · ";
            white-space: pre;
            display: inline-block;
        }
        
        .newStyle {
            font-size: 16px;
            border-bottom: 4px solid #06f;
            font-weight: 600;
        }
        
        .footerinfoTwo {
            margin: 10px 0 12px;
        }
        
        .QRcode {
            text-align: center;
            width: 400px;
        }
        
        .Qrcode-content {
            height: 210px;
            position: relative;
        }
        
        .Qrcode-content img {
            width: 150px;
            height: 150px;
        }
        
        .QRcode p a {
            color: #175199;
            display: inline-block;
            padding-left: 7px;
        }
        
        .QRcode div:first-child {
            font-size: 24px;
        }
        
        .selOptionOther {
            display: flex;
            flex-direction: row-reverse;
        }
        
        .tipsinfo {
            margin-bottom: 12px;
        }
        
        .image1 {
            display: inline-block;
            margin-top: 31px;
        }
        
        .image2 {
            position: absolute;
            left: 209px;
            top: 6px;
            opacity: 0;
        }
    </style>
    <script src="../JS/vue.js"></script>
    <script>
        console.log("山海自由归期，风雨自由相逢，祝各位前程似锦。\n" +
            "在前端的道路上越来越得心应手。\n" +
            "愿您以后有能力了，记得帮助身边的人。\n" +
            "以后行走四方，如果真有女子喜欢我，我未必拦得住，\n可我这辈子能不能只喜欢一个人，是做得到的。")
    </script>
</head>

<body>
    <div id="app">
        <div class="root">
            <div class="header"></div>
            <div class="logo"><img src="../images/logo.png" alt=""></div>
            <div class="info">
                <div>
                    <div class="selectOption" v-show=topShow>
                        <div class="leftinfo">
                            <div @click="change(0)" :class="{newStyle:0==number}">免密码登录</div>
                            <div @click="change(1)" :class="{newStyle:1==number}">密码登录</div>
                        </div>
                        <div @click="change(2)">
                            <div role="button" tabindex="0" aria-label="二维码图片" class="SignFlow-qrcodeTab"><svg width="52" height="52" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none">
                                    <mask id="id-3757926926-a" width="52" height="52" x="0" y="0"
                                        maskUnits="userSpaceOnUse">
                                        <path fill="#fff" d="M0 0l52 52V0H0z"></path>
                                    </mask>
                                    <g mask="url(#id-3757926926-a)">
                                        <path fill="#06F" d="M0 0h48a4 4 0 014 4v48L0 0z"></path>
                                        <path fill="url(#pattern0)" d="M0 0h52v52H0z"></path>
                                    </g>
                                    <defs>
                                        <pattern id="pattern0" width="1" height="1"
                                            patternContentUnits="objectBoundingBox">
                                            <use transform="scale(.00216)" xlink:href="#image0"></use>
                                        </pattern>
                                        <image id="image0" width="463" height="463"
                                            xlink:href="">
                                        </image>
                                    </defs>
                                </svg></div>
                        </div>
                    </div>
                    <div class="selOptionOther" v-show=!topShow>
                        <div @click="changeshow()">
                            <svg width="52" height="52" fill="none">
                                <mask id="id-320414155-a" width="52" height="52" x="0" y="0" maskUnits="userSpaceOnUse">
                                    <path fill="#fff" d="M0 0l52 52V0H0z"></path>
                                </mask>
                                <g mask="url(#id-320414155-a)">
                                    <path fill="#06F" d="M0 0l52 52V0H0z"></path>
                                    <path fill="#fff"
                                        d="M22.125 4h13.75A4.125 4.125 0 0140 8.125v27.75A4.125 4.125 0 0135.875 40h-13.75A4.125 4.125 0 0118 35.875V8.125A4.125 4.125 0 0122.125 4zm6.938 34.222c1.139 0 2.062-.945 2.062-2.11 0-1.167-.923-2.112-2.063-2.112-1.139 0-2.062.945-2.062 2.111 0 1.166.923 2.111 2.063 2.111zM21 8.333v24h16v-24H21z"
                                        fill-rule="evenodd" clip-rule="evenodd"></path>
                                    <path fill="#fff"
                                        d="M46.996 15.482L39 19.064l-7.996-3.582A1.6 1.6 0 0132.6 14h12.8a1.6 1.6 0 011.596 1.482zM47 16.646V24.4a1.6 1.6 0 01-1.6 1.6H32.6a1.6 1.6 0 01-1.6-1.6v-7.754l8 3.584 8-3.584z"
                                        fill-rule="evenodd" clip-rule="evenodd"></path>
                                    <path fill="#06F" d="M31 15.483v1.17l8 3.577 8-3.577v-1.17l-8 3.581-8-3.581z">
                                    </path>
                                </g>
                            </svg>
                        </div>
                    </div>
                    <form action="" v-show="0===number">
                        <div>
                            <!-- 输入电话号码 -->
                            <div class="telphone">
                                <div class="telStyle">
                                    <div>
                                        <select name="" id="">
                                            <option value="0">中国+86</option>
                                            <option value="1">美国+1</option>
                                            <option value="2">日本+81</option>
                                            <option value="3">中国香港+852</option>
                                            <option value="4">中国澳门+853</option>
                                            <option value="5">中国台湾+853</option>
                                            <option value="6">马来西亚+60</option>
                                            <option value="7">澳大利亚+61</option>
                                            <option value="8">加拿大+1</option>
                                            <option value="9">英国+44</option>
                                            <option value="10">新加坡+65</option>
                                            <option value="11">德国+49</option>
                                            <option value="12">俄罗斯+7</option>
                                            <option value="13">埃及+20</option>
                                            <option value="14">南非+27</option>
                                            <option value="15">希腊+30</option>
                                            <option value="16">荷兰+31</option>
                                            <option value="17">比利时+32</option>
                                            <option value="18">法国+33</option>
                                            <option value="19">西班牙+34</option>
                                            <option value="20">匈牙利+36</option>
                                            <option value="21">意大利+39</option>
                                            <option value="22">罗马尼亚+40</option>
                                            <option value="23">瑞士+41</option>
                                            <option value="24">奥地利+43</option>
                                            <option value="25">丹麦+45</option>
                                            <option value="26">瑞士+46</option>
                                            <option value="27">挪威+47</option>
                                            <option value="28">波兰+48</option>
                                            <option value="29">秘鲁+51</option>
                                            <option value="30">墨西哥+52</option>
                                            <option value="31">古巴+53</option>
                                            <option value="32">阿根廷+54</option>
                                            <option value="33">巴西+55</option>
                                            <option value="34">智利+56</option>
                                            <option value="35">哥伦比亚+57</option>
                                            <option value="36">委内瑞拉+58</option>
                                            <option value="37">印度尼西亚+62</option>
                                            <option value="38">菲律宾+63</option>
                                            <option value="39">新西兰+64</option>
                                            <option value="40">泰国+66</option>
                                            <option value="41">哈萨克斯坦+7</option>
                                            <option value="42">韩国+82</option>
                                            <option value="43">越南+84</option>
                                            <option value="44">土耳其+90</option>
                                            <option value="45">印度+91</option>
                                            <option value="46">巴基斯坦+92</option>
                                            <option value="47">阿富汗+93</option>
                                            <option value="48">斯里兰卡+94</option>
                                            <option value="49">缅甸+95</option>
                                            <option value="50">伊朗+98</option>
                                            <option value="51">摩洛哥+212</option>
                                            <option value="52">阿尔及利亚+213</option>
                                            <option value="53">突尼斯+216</option>
                                            <option value="54">利比亚+218</option>
                                            <option value="55">冈比亚+220</option>
                                            <option value="56">塞内加尔+221</option>
                                            <option value="57">马里+223</option>
                                            <option value="58">几内亚+224</option>
                                            <option value="59">科特迪瓦+225</option>
                                            <option value="60">布基纳法索+226</option>
                                            <option value="61">尼日尔+227</option>
                                            <option value="62">多哥+228</option>
                                            <option value="63">贝宁+229</option>
                                            <option value="64">毛里求斯+230</option>
                                            <option value="65">利比里亚+231</option>
                                            <option value="66">塞拉利昂+232</option>
                                            <option value="67">加纳+223</option>
                                            <option value="68">尼日利亚+234</option>
                                            <option value="69">乍得+235</option>
                                            <option value="70">中非共和国+236</option>
                                            <option value="71">喀麦隆+237</option>
                                            <option value="72">圣多美和普林西比+239</option>
                                            <option value="73">加蓬+241</option>
                                            <option value="74">刚果民主共和国+243</option>
                                            <option value="75">安哥拉+244</option>
                                            <option value="75">阿森松岛+247</option>
                                            <option value="76">塞舌尔+248</option>
                                            <option value="77">苏丹+249</option>
                                            <option value="78">埃塞格比亚+251</option>
                                            <option value="79">索马里+252</option>
                                            <option value="80">吉布提+253</option>
                                            <option value="81">肯尼亚+254</option>
                                            <option value="82">坦桑尼亚+255</option>
                                            <option value="83">乌干达+256</option>
                                            <option value="84">布隆迪+257</option>
                                            <option value="85">莫桑比克+258</option>
                                            <option value="86">赞比亚+260</option>
                                            <option value="87">马达加斯加+261</option>
                                            <option value="88">津巴布韦+263</option>
                                            <option value="89">纳米比亚+264</option>
                                            <option value="90">马拉维+265</option>
                                            <option value="91">莱索托+266</option>
                                            <option value="92">博茨瓦纳+267</option>
                                            <option value="93">斯威士兰+268</option>
                                            <option value="94">直布罗陀+350</option>
                                            <option value="95">卢森堡+352</option>
                                            <option value="96">爱尔兰+353</option>
                                            <option value="97">冰岛+354</option>
                                            <option value="98">阿尔巴尼亚+355</option>
                                            <option value="99">马尔其+356</option>
                                            <option value="100">塞浦路斯+357</option>
                                            <option value="101">芬兰+358</option>
                                            <option value="102">保加利亚+359</option>
                                            <option value="103">立陶宛+370</option>
                                            <option value="104">拉脱维亚+371</option>
                                            <option value="105">爱沙尼亚+372</option>
                                            <option value="106">摩尔多瓦+373</option>
                                            <option value="107">亚美尼亚+374</option>
                                            <option value="108">白俄罗斯+375</option>
                                            <option value="109">安道尔共和国+376</option>
                                            <option value="110">摩纳哥+377</option>
                                        </select>
                                    </div>
                                    <div class="line">&nbsp;</div>
                                    <div>
                                        <input type="text" placeholder="手机号">
                                    </div>

                                </div>
                            </div>
                            <!-- 验证码 -->
                            <div class="VerificationCode">
                                <div class="codeNum">
                                    <input type="text" placeholder="输入6位短信验证码">
                                </div>
                                <div class="collect">
                                    <a href="">获取验证码</a>
                                </div>
                            </div>
                            <!-- 语音验证 -->
                            <div class="CodeReceiving">
                                <a href="" style="font-size: 14px;">接受语音验证码</a>
                            </div>
                            <!-- 登录/注册按钮 -->
                            <div class="setBtn">
                                <button class="Btn">注册/登录</button>
                            </div>

                        </div>
                    </form>

                    <form v-show="1===number">
                        <div>
                            <!-- 输入电话号码 -->
                            <div class="telphone">
                                <div class="telStyle">
                                    <input type="text" placeholder="手机号码或邮箱">
                                </div>
                            </div>
                            <!-- 验证码 -->
                            <div class="VerificationCode">
                                <div class="codeNum">
                                    <input type="password" placeholder="密码">
                                </div>

                            </div>
                            <!-- 语音验证 -->
                            <div class="other">
                                <a href="" style="font-size: 14px; color: #175199;">海外手机号登录</a>
                                <a href="" style="font-size: 14px;color: #8590a6;">忘记密码？</a>
                            </div>
                            <!-- 登录/注册按钮 -->
                            <div class="setBtn">
                                <button class="Btn">注册/登录</button>
                            </div>

                        </div>
                    </form>

                    <!-- 二维码切换 -->
                    <div v-show="2===number">
                        <div class="QRcode">
                            <div>
                                扫码登录
                            </div>
                            <div class="Qrcode-content" @mouseover="mouseOver" @mouseleave="mouseLeave">
                                <img src="../images/image.png" alt="" class="image1" ref="one">
                                <img src="../images/phone.png" alt="" style="width:128px;height:200px" class="image2" ref="two">
                            </div>
                            <div class="tipsinfo">
                                <p>打开<a href="#">知乎App</a></p>
                                <p>在「我的」页面顶部打开扫一扫</p>
                                <p>如扫码异常请下载最新版客户端</p>
                            </div>
                        </div>
                    </div>

                    <!-- 提示信息 -->
                    <div v-show=isShow>
                        <div class="Tips">
                            未注册手机验证后自动登录，注册即代表同意
                            <a href="">《知乎协议》</a>
                            <a href="">《隐私保护指引》</a>
                        </div>
                    </div>
                    <!-- 登录方式 -->
                    <div class="login">
                        <div>社交账号登录</div>
                        <div class="icon">
                            <div class="WeChat">
                                <div class="WeChatimg">
                                    <img src="../images/微信.png" alt="">
                                </div>
                                <div class="WeChaFont">微信</div>
                            </div>

                            <div class="QQ">
                                <div class="QQimg"><img src="../images/QQ.png" alt=""></div>
                                <div class="QQFont">QQ</div>
                            </div>

                            <div class="sina">
                                <div class="Sinaimg">
                                    <img src="../images/新浪.png" alt="">
                                </div>
                                <div class="SinaFont">新浪</div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="bottominfo">
                            <div>
                                <a href="/org/signup" data-za-detail-view-id="4943" class="css-jzr1wa"><span
                                        style="display: inline-flex; align-items: center;">&ZeroWidthSpace;<svg
                                            class="Zi Zi--BadgeCert css-vfpo4o" fill="currentColor" viewBox="0 0 24 24"
                                            width="26" height="26">
                                            <g fill="none" fill-rule="evenodd">
                                                <path fill="#0F88EB"
                                                    d="M2.64 13.39c1.068.895 1.808 2.733 1.66 4.113l.022-.196c-.147 1.384.856 2.4 2.24 2.278l-.198.016c1.387-.122 3.21.655 4.083 1.734l-.125-.154c.876 1.084 2.304 1.092 3.195.027l-.127.152c.895-1.068 2.733-1.808 4.113-1.66l-.198-.022c1.386.147 2.402-.856 2.279-2.238l.017.197c-.122-1.388.655-3.212 1.734-4.084l-.154.125c1.083-.876 1.092-2.304.027-3.195l.152.127c-1.068-.895-1.808-2.732-1.66-4.113l-.022.198c.147-1.386-.856-2.4-2.24-2.279l.198-.017c-1.387.123-3.21-.654-4.083-1.733l.125.153c-.876-1.083-2.304-1.092-3.195-.027l.127-.152c-.895 1.068-2.733 1.808-4.113 1.662l.198.02c-1.386-.147-2.4.857-2.279 2.24L4.4 6.363c.122 1.387-.655 3.21-1.734 4.084l.154-.126c-1.083.878-1.092 2.304-.027 3.195l-.152-.127z">
                                                </path>
                                                <path fill="#FFF"
                                                    d="M9.78 15.728l-2.633-2.999s-.458-.705.242-1.362c.7-.657 1.328-.219 1.328-.219l1.953 2.132 4.696-4.931s.663-.348 1.299.198c.636.545.27 1.382.27 1.382s-3.466 3.858-5.376 5.782c-.98.93-1.778.017-1.778.017z">
                                                </path>
                                            </g>
                                        </svg></span>开通机构号</a>
                            </div>
                        </div>
                        <div>
                            <button class="cilckBtn"><span
                                    style="display: inline-flex; align-items: center;">&ZeroWidthSpace;<svg width="20"
                                        height="20" viewBox="0 0 20 20" class="css-vfpo4o" fill="none">
                                        <path fill="url(#paint0_linear)"
                                            d="M16.131 0H3.87A3.869 3.869 0 000 3.869V16.13A3.869 3.869 0 003.869 20H16.13A3.869 3.869 0 0020 16.131V3.87A3.869 3.869 0 0016.131 0z">
                                        </path>
                                        <path fill="#fff"
                                            d="M14.9 10.046V7.391l2.67-.137.232-.015c.147-.26.214-.559.192-.857-.02-.071-.059-.19-.178-.163a9.048 9.048 0 01-1.204.207c-.777.092-1.119.116-2.196.193-1.893.14-3.56.205-3.56.205a.722.722 0 00.75.724c.642-.027 1.582-.071 2.531-.119v2.617h-3.616a.753.753 0 00.753.754h2.843v2.008c0 .255-.13.341-.345.347h-1.1a1.187 1.187 0 00.632.742c.244.081.503.109.76.08.385-.02.836-.237.836-1.014V10.8h3.175a.362.362 0 00.361-.362v-.392H14.9z">
                                        </path>
                                        <path fill="#fff"
                                            d="M12.414 8.251a.65.65 0 00-.908-.148l-.107.077 1.187 1.662.635-.457-.807-1.134zm4.147-.057l-.89 1.166.647.472 1.273-1.685-.107-.077a.653.653 0 00-.923.124zM9.737 7.031H6.263v6.065h.858l.112.732 1.154-.732h1.356L9.737 7.03zm-1.465 5.311l-.674.415-.065-.427h-.487V7.785h1.908v4.557h-.682zM5.637 9.761H4.379V7.785h1.436v-.368a.386.386 0 00-.383-.385h-2.24a115.436 115.436 0 01.347-1.018 1.187 1.187 0 00-.68.199.908.908 0 00-.385.551c-.151.416-.296.813-.368 1.05-.136.38-.466 1.048-.466 1.048.248-.002.493-.06.716-.169a1.205 1.205 0 00.575-.822c0-.027 0-.053.024-.086h.65V9.35c0 .142 0 .279-.018.412H2.433a.754.754 0 00-.754.754h1.837a4.955 4.955 0 01-.226 1.035 4.746 4.746 0 01-.845 1.484 9.363 9.363 0 01-.89.845 1.56 1.56 0 001.527-.27 4.21 4.21 0 00.908-1.623c.152-.483.258-.98.318-1.483h1.685v-.38a.362.362 0 00-.356-.362z">
                                        </path>
                                        <path fill="#fff"
                                            d="M4.747 11.318l-.658.425 1.418 2.118a1.96 1.96 0 00.19-.629.908.908 0 00-.08-.617l-.87-1.297z">
                                        </path>
                                        <defs>
                                            <linearGradient id="paint0_linear" x1="-6.708" x2="25.504" y1="29.91"
                                                y2="-8.476" gradientUnits="userSpaceOnUse">
                                                <stop offset=".42" stop-color="#06F"></stop>
                                                <stop offset=".92" stop-color="#00C4FF"></stop>
                                            </linearGradient>
                                        </defs>
                                    </svg></span>下载知乎 App</button></div>
                    </div>
                </div>
            </div>

            <footer class="footerInfo">
                <div class="ZhihuLinks">
                    <a href="">知乎专栏</a>
                    <a href="">圆桌</a>
                    <a href="">发现</a>
                    <a href="">移动应用</a>
                    <a href="">联系我们</a>
                    <a href="">来知乎工作</a>
                    <a href="">注册机构号</a>
                    <span>Investor Relations</span>
                </div>
                <div class="footerinfoTwo">
                    <span>&copy;2021 知乎</span>
                    <a href="">京 ICP 证 110745 号</a>
                    <a>
                        <img src="../images/v2-d0289dc0a46fc5b15b3363ffa78cf6c7.png" alt=""> 京公网安备 11010802020088 号
                    </a>
                    <a href="">
                        出版物经营许可证
                    </a>
                    <span>互联网药品信息服务资格证书（京）- 非经营性 - 2017 - 0067</span>
                </div>
                <div>
                    <a href="">侵权举报</a>
                    <a href="">网上有害信息举报专区</a>
                    <a href="">儿童色情信息举报专区</a>
                    <span>违法和不良信息举报：010-82716601</span>
                    <span>举报邮箱：jubao@zhihu.com</span>
                </div>
            </footer>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    number: 0,
                    isShow: true,
                    topShow: true
                }
            },
            methods: {
                change: function(index) {
                    this.number = index;
                    if (index == 2) {
                        this.isShow = false
                    } else {
                        this.isShow = true
                    };
                    if (index == 2) {
                        this.topShow = false
                    } else {
                        this.topShow = true
                    }
                },
                changeshow: function(index) {
                    this.topShow = !this.topShow;
                    this.number = 1
                },
                mouseOver() {
                    // 操作dom 
                    let one = this.$refs.one
                    let two = this.$refs.two
                    one.style.transform = "translate(-90px,0)";
                    two.style.opacity = 1
                },
                mouseLeave() {
                    let one = this.$refs.one
                    let two = this.$refs.two
                    one.style.transform = "translate(0,0)";
                    two.style.opacity = 0
                }
            },

        })
    </script>
</body>

</html>